<template>
  <div id="app">
    <div id="nav">
      <div>
        <p id="webTitle">ZHJ</p>
        <p id="webTitle">Personal website</p>
      </div>
      <!-- 菜单 -->
      <!-- <app-Header></app-Header> -->
      <div style="color: white;font-size: 23px;">
        <router-link :to="{name:'homeLink'}">
          <span class="nav_Title">首页</span>
        </router-link>|
        <router-link to="/basis">
          <span class="nav_Title">VUE基础</span>
        </router-link>|
        <router-link to="/about">
          <span class="nav_Title">交流</span>
        </router-link>|
        <router-link to="/Roast">
          <span class="nav_Title">吐槽</span>
        </router-link>|
        <router-link to="/VIP">
          <span class="nav_Title">VIP视频</span>
        </router-link>|
        <router-link to="/myresume">
          <span class="nav_Title">简历</span>
        </router-link>
      </div>
    </div>
    <!-- 路由组件 -->
    <router-view/>
  </div>
</template>

<script>
import header from "./components/herderView/Header";
import AV from "leancloud-storage";
var APP_ID = "afxcQDkB6dDvYqJVUfwUHJuR-gzGzoHsz";
var APP_KEY = "GWWmP2cLfdUiayYerNs7K2la";

export default {
  components: {
    appHeader: header
  },
  created(){
     // 存储服务
    var { Query, User } = AV;
    AV.init({
      appId: APP_ID,
      appKey: APP_KEY
    });
  }
};
</script>


<style >
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  min-height: 100vh;
  width: 100vw;
}
#nav {
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
a {
  font-weight: bold;
  color: white;
}
a:hover {
  color: #42b983;
}
.router-link-exact-active {
  color: #42b983;
}

#webTitle {
  color: white;
  font-size: 28px;
  font-weight: 900;
  margin: 0;
}

.nav_Title {
  font-size: 22px;
  letter-spacing: 8px;
}
</style>
